import React, { useEffect, useState} from 'react'
import { View, Text } from '@tarojs/components'
import Taro from "@tarojs/taro"
import {QuestionPo} from "../../types";
import './index.scss'

export default ()=>{
  const [questions,setQuestions] = useState<QuestionPo[]>([]);
  useEffect(()=>{
      const currentQuestionsStr = Taro.getStorageSync("currentQuestions")
    setQuestions(JSON.parse(currentQuestionsStr))
  },[])

  function onClick(num:number) {
    Taro.eventCenter.trigger("updateIndex",num-1)
    Taro.navigateBack();
  }

  return <View className='wing-blank asheet-container'>
    {
      questions.map((item,index)=>{
        if(!item.userAnswer) return  <SubjectResultCell  key={index} num={index+1} onClick={onClick} /> // 未答
        return <SubjectResultCell key={index} num={index+1} onClick={onClick} type={SubjectResultCellTypeEnum.RIGHT} /> // 已答
        // const rights = item.answer.split(",");
        // const rorw = (rights.length === item.userAnswer?.length && rights.every(i => item.userAnswer?.find(q => q === i)))
        // return     <SubjectResultCell onClick={onClick} num={index+1} type={rorw?SubjectResultCellTypeEnum.RIGHT:SubjectResultCellTypeEnum.WRONG} />
      })
    }
  </View>
}

export enum SubjectResultCellTypeEnum {
  RIGHT,
  WRONG
}

export interface SubjectResultCellProps {
  type?: SubjectResultCellTypeEnum,
  num: number;
  onClick:(num:number)=>void
}

export const SubjectResultCell = (props: SubjectResultCellProps) => {
  let className = "subject-result-cell ";
  if (props.type === SubjectResultCellTypeEnum.RIGHT) className += "subject-result-cell-right"
  if (props.type === SubjectResultCellTypeEnum.WRONG) className += "subject-result-cell-wrong"
  return <View className='asheet-cell-container' onClick={()=>props.onClick(props.num)}>
    <View className={className}>
      <Text>{props.num}</Text>
    </View>
  </View>
}
